<template>
    <el-card>
        <el-row :gutter="5">
            <el-col :md="{span:8}" :sm="{span: 12}">
                <el-input
                        v-model="search.content"
                        placeholder="请输入用户名或者id"
                        class="search-doctor-input"
                >
                    <template #prepend>
                        <el-select v-model="search.searchCondition" placeholder="请选择状态" style="width: 100px" clearable >
                            <el-option label="请选择" value=""></el-option>
                            <el-option label="未支付" value="0"></el-option>
                            <el-option label="已支付" value="1"></el-option>
                            <el-option label="已结单" value="2"></el-option>
                            <el-option label="支付失败" value="3"></el-option>
                        </el-select>
                    </template>
                    <template #append>
                        <el-button style="width: 100px" @click="LoadOrderDatas(1)">
                            <el-icon>
                                <i class="fas fa-search" />
                            </el-icon>
                            搜索
                        </el-button>
                    </template>
                </el-input>
            </el-col>
        </el-row>
    </el-card>
    <el-card style="margin-top: 10px">

        <el-table :data="orderDatas" style="width: 100%" v-loading="loading">
            <el-table-column prop="orderId" label="订单ID" width="80"/>
            <el-table-column prop="userId" label="职工ID" width="80" />
            <el-table-column prop="patientId" label="患者ID" width="80" />
            <el-table-column prop="prescriptionId" label="诊断ID" width="80" />
            <el-table-column prop="orderCreatetime" label="创建时间"  />
            <el-table-column prop="orderPaytime" label="支付时间"  />
            <el-table-column prop="orderEndtime" label="结束时间"  />
            <el-table-column prop="orderPrice" label="订单金额"  />
            <el-table-column prop="drugs" label="处方用药"  />
            <el-table-column fixed="right" label="订单状态" >
                <template #default="scope">
                    <template v-if="scope.row.orderState===0">
                        未支付
                    </template>
                    <template v-if="scope.row.orderState===1">
                        未结单
                    </template>
                    <template v-if="scope.row.orderState===2">
                        已结单
                    </template>
                    <template v-if="scope.row.orderState===3">
                        订单失败
                    </template>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" >
                <template #default="scope">
                    <el-button type="primary" v-if="scope.row.orderState===0" @click="updateStateBePay(scope.row)">
                        已支付
                    </el-button>
                    <el-button type="primary" v-else-if="scope.row.orderState===1" @click="updateStateBeEnd(scope.row)">
                        已结单
                    </el-button>
                    <el-button type="primary" v-else-if="scope.row.orderState===2" @click="updateStateBeNoPay(scope.row)">
                        未支付
                    </el-button>
                    <template v-else>
                        支付失败
                    </template>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-card style="margin-top: 10px">
        <el-pagination style="text-align: center" layout="prev, pager, next" :page-size="pageInation.pageSize" :page-count="pageInation.pageCount" @current-change="LoadPatientDatas" small></el-pagination>
    </el-card>
</template>

<script>
    import utils from "@/Utils";

    export default {
        name: "DrugsAdminOrder",
        data(){
            return{
                search:{
                    content:'',
                    searchCondition:''
                },
                orderDatas:[],
                pageInation:{
                    pageCount:0,
                    pageSize:0,
                },
                loading:true,
                utils
            }
        },
        methods:{
            LoadOrderDatas:async function (pageIndex) {
                await this.axios.post("/Order/isLogin/isSystemAndDrugs/getOrders",{
                    pageIndex:pageIndex,
                    pageSize:10,
                    search:this.search.content,
                    condition:this.search.searchCondition
                }).then((req)=>{
                    const data=req.data;
                    if(data.code>0){
                        this.utils.tipsMessage(data.error,data.code);
                        return
                    }
                    const pageData=data.data.pageData;
                    this.pageInation.pageSize=data.data.pageSize;
                    this.pageInation.pageCount=data.data.pageCount;
                    this.orderDatas=pageData;
                    this.loading=false
                })
            },
            updateStateBePay:function (val) {
                this.$confirm("请确认患者是否已支付成功才确认", "标记支付", {
                    type:'type',
                    showCancelButton:false
                }).then(()=>{
                    this.axios.post("/Order/isLogin/isSystemAndDrugs/updateState",{
                        orderId:val.orderId,
                        userId:val.userId,
                        orderState:1
                    }).then((req)=>{
                        const data=req.data;
                        if(data.code>0){
                            this.utils.tipsMessage(data.error,data.code);
                            return;
                        }
                        this.utils.tipsMessage(data.data,data.code);
                        this.LoadOrderDatas(1);
                    })
                })
            },
            updateStateBeEnd:function (val) {
                this.$confirm("请确认是否已经将药品发放给患者", "标记结单", {
                    type:'type',
                    showCancelButton:false
                }).then(()=>{
                    this.axios.post("/Order/isLogin/isSystemAndDrugs/updateState",{
                        orderId:val.orderId,
                        userId:val.userId,
                        orderState:2
                    }).then((req)=>{
                        const data=req.data;
                        if(data.code>0){
                            this.utils.tipsMessage(data.error,data.code);
                            return;
                        }
                        this.utils.tipsMessage(data.data,data.code);
                        this.LoadOrderDatas(1);
                    })
                })
            },
            updateStateBeNoPay:function (val) {
                this.$confirm("请确认是否已经将该订单标记回未支付状态", "标记未支付", {
                    type:'type',
                    showCancelButton:false
                }).then(()=>{
                    this.axios.post("/Order/isLogin/isSystemAndDrugs/updateState",{
                        orderId:val.orderId,
                        userId:val.userId,
                        orderState:0
                    }).then((req)=>{
                        const data=req.data;
                        if(data.code>0){
                            this.utils.tipsMessage(data.error,data.code);
                            return;
                        }
                        this.utils.tipsMessage(data.data,data.code);
                        this.LoadOrderDatas(1);
                    })
                })
            }
        },
        mounted(){
            this.LoadOrderDatas(1);
        }
    }
</script>

<style scoped>

</style>